<!-- 门店入驻 -->
<template>
  <view class="apply-commission-wrap page_box">
    <!-- 标题栏 -->
    <view class="head-box" :style="{background: 'url('+navBgImage+') no-repeat','background-size': '100%'}">
      <shopro-navbar back-icon-color="#fff" :background="{}"></shopro-navbar>
    </view>
    <!-- 表单 -->
    <view class="apply-form content_box">
      <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
        <u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="公司名称" prop="company">
          <u-input placeholder="请输入公司名称" :placeholderStyle="placeholderStyle" v-model="model.company" type="text"></u-input>
        </u-form-item>
        <u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="公司地址" prop="shop_address">
          <u-input placeholder="请输入公司地址" :placeholderStyle="placeholderStyle" v-model="model.shop_address" type="text"></u-input>
        </u-form-item>
        <u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="联系人" prop="name">
          <u-input placeholder="请输入联系人姓名" :placeholderStyle="placeholderStyle" v-model="model.name" type="text"></u-input>
        </u-form-item>
        <u-form-item :labelStyle="labelStyle" label-position="left" label="手机号" prop="shop_mobile" label-width="150">
          <u-input placeholder="请输入联系人手机号" :placeholderStyle="placeholderStyle" v-model="model.shop_mobile" type="number"></u-input>
        </u-form-item>



<!--        <u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="营业天数" prop="weeks">-->
<!--          <u-input type="select" placeholder="请选择营业天数" disabled :placeholderStyle="placeholderStyle" v-model="model.weeks" @click="onSelect('week')"></u-input>-->
<!--        </u-form-item>-->
<!--        <u-form-item :labelStyle="labelStyle" right-icon="map-fill" :right-icon-style="{color:'#4CB89D'}" label-width="150" label-position="left" label="所在地区" prop="area">-->
<!--          <u-input type="text" disabled v-model="model.area" placeholder="请点击定位" @click="chooseLocation"></u-input>-->
<!--        </u-form-item>-->
<!--        <view class="agreement u-flex u-col-center">-->
<!--          <u-checkbox v-model="model.agreement" activeColor="#4CB89D" shape="circle" @change="onAgreement"></u-checkbox>-->
<!--          <view class="agreement-text" @tap="toProtocol">勾选代表同意《申请协议》</view>-->
<!--        </view>-->
        <view class="u-flex u-row-center u-col-center"><button class="u-reset-button save-btn" @tap="onSubmit"  :class="isFormEnd?'disableds':''"  :disabled="isFormEnd">确认提交</button></view>
      </u-form>
    </view>

    <!-- 弹窗 -->
    <u-select v-if="selectShow" :mode="selectMode" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>

    <!-- 选择星期 -->
    <u-popup v-model="showWeeksModal" safe-area-inset-bottom mode="bottom">
      <view class="week-modal">
        <view class="u-flex u-row-between u-p-x-30 week-modal--head ">
          <view></view>
          <view class="action text-green" @tap="saveWeekModal">确定</view>
        </view>
        <view class="u-flex u-flex-wrap u-p-x-30 u-p-y-30 week-modal--content">
          <view v-for="(item, index) in weekcheckbox" class="week-btn" :key="index">
            <button @tap="onSelectWeek(item)" class="cu-btn" :class="!item.checked ? 'line-green' : 'bg-green'">{{ item.name }}</button>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 权限验证 -->
    <u-popup v-model="showNotice" mode="center" border-radius="20">
      <view class="notice-modal">
        <view class="img-wrap"><image class="notice-img" :src="authNotice.img" mode=""></image></view>
        <view class="notice-title">{{ authNotice.title }}</view>
        <view class="notice-detail">{{ authNotice.detail || '' }}</view>
        <button class="u-reset-button notice-btn" @tap="onAuthBtn(authNotice.btnPath)">{{ authNotice.btnText }}</button>
        <button class="u-reset-button back-btn" @tap="$Router.back()">返回</button>
      </view>
    </u-popup>
    <u-toast ref="submitAudit"></u-toast>
    <u-modal :value="showAudit" :show-confirm-button="true" @confirm="confirmAudit" :confirm-color="'#FFFFFF'" :confirm-style="confirmStyle" :confirm-text="'我知道了'" title=" " >
      <view class="slot-content">
        <view class="audit_img">
            <image class="audit_img_top" src="https://duomi.bigchun.com/images/5c8352de0bcc21.png"></image>
        </view>
        <view class="audit_title">入驻信息审核中</view>
        <view class="audit_sub_title">请耐心等待工作人员审核</view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import Auth from '@/shopro/permission/index.js';
import { mapMutations, mapActions, mapState,mapGetters } from 'vuex';
import { MAP_KEY } from '@/env.js';
export default {
  components: {},
  data() {
    return {
      navBgImage:"https://duomi.bigchun.com/images/gongyingshangbanner3.png",
      confirmStyle:{
        'width': '69%',
        'margin': '40rpx auto',
        'background': '#D9D9D9 linear-gradient(90deg, #FC5351 0%, #FF6E6D 100%)',
        'border-radius': '60rpx',
        'flex': 'inherit'
      },
      showAudit:false,
      showNotice: false,
      showWeeksModal: false, //星期弹窗
      isFormEnd: false,
      weekcheckbox: [
        {
          value: '1',
          name: '周一',
          checked: false
        },

        {
          value: '2',
          name: '周二',
          checked: false
        },
        {
          value: '3',
          name: '周三',
          checked: false
        },
        {
          value: '4',
          name: '周四',
          checked: false
        },
        {
          value: '5',
          name: '周五',
          checked: false
        },
        {
          value: '6',
          name: '周六',
          checked: false
        },
        {
          value: '7',
          name: '周日',
          checked: false
        }
      ],
      authNotice: {},
      // 表单
      errorType: ['message'],
      selectShow: false,
      selectMode: 'mutil-column', // single-column, mutil-column, mutil-column-auto
      selectType: '',
      selectList: [],
      labelStyle: {
        'font-size': '28rpx',
        'font-weight': '500',
        color: '#333'
      },
      placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;',
      model: {
        token:uni.getStorageSync('token'),
        company: '', //门店名称
        shop_mobile: '', //手机号
        name: '', //真实姓名
        shop_address: '',
      },
      rules: {
        company: [
          {
            required: true,
            message: '请输入公司名称',
            trigger: ['change', 'blur']
          }
        ],
        name: [
          {
            required: true,
            message: '请输入联系人姓名',
            trigger: ['change', 'blur']
          }
        ],
        shop_address: [
          {
            required: true,
            message: '请填写公司地址',
            trigger: ['change', 'blur']
          }
        ],
        shop_mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur']
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change，二者之间用英文逗号隔开
            trigger: ['change', 'blur']
          }
        ],
      }
    };
  },
  computed: {
    ...mapGetters(['initStore']),
    selectWorkerTime() {
      let mArr = [];
      for (let i = 0; i <= 24; i++) {
        let t = String(i).padStart(2, '0');
        mArr.push(
            {
              value: `${t}:00`,
              label: `${t}:00`
            },
            {
              value: `${t}:30`,
              label: `${t}:30`
            }
        );
      }
      mArr.pop();
      return [mArr, mArr];
    }
  },
  onLoad() {
    this.getStoreInfo();
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    confirmAudit(){
      this.showAudit = false;
      this.$Router.back();
    },
    // 选择星期
    saveWeekModal() {
      this.showWeeksModal = false;
      let arr = [];
      let arr2 = [];
      this.weekcheckbox.forEach(item => {
        if (item.checked) {
          arr.push(item.value);
          arr2.push(item.name);
        }
      });
      this.model.openweeks = arr.join(',');
      this.model.weeks = arr2.join(',');
    },

    // 选择星期
    onSelectWeek(index) {
      this.weekcheckbox[index].checked = !this.weekcheckbox[index].checked;
    },

    // 弹窗按钮
    onAuthBtn(path) {
      path &&
      this.$Router.push({
        path: path
      });
      this.showNotice = false;
    },

    // // 上传图片成功
    // uploadSuccess(e, type) {
    //   switch (type) {
    //     case 'storeImg':
    //       this.model.images = [];
    //       e.forEach(item => {
    //         this.model.images.push(item.response.data.url);
    //       });
    //       break;
    //     default:
    //       return;
    //   }
    // },

    // // 移除图片
    // uploadRemove(index, type) {
    //   switch (type) {
    //     case 'storeImg':
    //       this.model.images.splice(index, 1);
    //       break;
    //     default:
    //       return;
    //   }
    // },

    // // 地址选择
    // async chooseLocation() {
    //   let authState = await new Auth('userLocation').check();
    //   authState &&
    //   uni.chooseLocation({
    //     success: res => {
    //       this.model.latitude = res.latitude;
    //       this.model.longitude = res.longitude;
    //       this.getLocationInfo();
    //     },
    //     fail: err => {
    //       console.log(err);
    //     }
    //   });
    // },

    // //逆坐标解析
    // async getLocationInfo() {
    //   this.chooseAddress = '定位中...';
    //   const [error, res] = await uni.request({
    //     url: `https://restapi.amap.com/v3/geocode/regeo?location=${this.model.longitude},${this.model.latitude}&key=${MAP_KEY}`
    //   });
    //   if (res.data.status === '1') {
    //     const addressComponent = res.data.regeocode.addressComponent;
    //     this.model.area_id = addressComponent.adcode;
    //     this.model.area = `${addressComponent.province}-${addressComponent.city.length ? addressComponent.city : addressComponent.province}-${addressComponent.district}`;
    //     this.model.address = res.data.regeocode.formatted_address.replace(`${addressComponent.province}${addressComponent.city}${addressComponent.district}`, '');
    //   } else {
    //     console.log('%c逆地址解析失败，请检查是否在env中配置地图key', 'color:green;background:yellow');
    //   }
    // },

    onSelect(type) {
      this.selectType = type;
      switch (type) {
        case 'time':
          this.selectShow = true;
          this.selectMode = 'mutil-column';
          this.selectList = this.selectWorkerTime;
          break;
        case 'week':
          this.showWeeksModal = true;
          break;
        default:
          return;
      }
    },

    // 选择时间
    selectConfirm(e) {
      switch (this.selectType) {
        case 'time':
          this.model.openhours = '';
          e.map((val, index) => {
            this.model.openhours += this.model.openhours == '' ? val.label : ' - ' + val.label;
          });
          break;
        default:
          return;
      }
    },

    // // 勾选同意
    // onAgreement(e) {
    //   this.model.agreement = e.value;
    // },

    // 门店详情
    getStoreInfo() {
      let that = this;
      that.$http('store.shopInfo').then(res => {
        if (res.code === 1) {
          res.data && this.authStatus(res.data);
        }
      });
    },
    // // 跳转门店协议
    // toProtocol() {
    //   this.initStore.protocol && this.jump('/pages/public/richtext', { id: this.initStore.protocol })
    // },

    // 初始化model
    initModel() {
      // 构建星期
      let weeksArr = this.model.openweeks.split(',');
      let weekTextArr = [];
      this.weekcheckbox.forEach(item => {
        if (weeksArr.includes(item.value)) {
          weekTextArr.push(item.name);
          item.checked = true;
        }
      });
      this.model.weeks = weekTextArr.join(',');
      // 构建省市区
      // if (this.model.province_name) {
      //   this.model.area = `${this.model.province_name}-${this.model.city_name}-${this.model.area_name}`;
      // }
      // if (this.model.images) {
      //   this.model.images.forEach(item => {
      //     this.model.fileImages.push({
      //       url: item
      //     });
      //   });
      // }
      // 协议
      // this.$set(this.model, 'agreement', false);
    },

    // 状态鉴权
    authStatus(data) {
      switch (String(data.status)) {
        case '0':
          this.showNotice = true;
          this.model = { ...this.model, ...data };
          this.initModel();
          this.authNotice = {
            img: this.$IMG_URL + '/imgs/commission/auth_check.png',
            title: '正在审核中',
            detail: data.status_msg,
            btnText: '修改信息',
            btnPath: ''
          };
          break;
        case '-1':
          this.showNotice = true;
          this.model = { ...this.model, ...data };
          this.initModel();
          this.authNotice = {
            img: this.$IMG_URL + '/imgs/commission/auth_reject.png',
            title: '您的申请已被驳回！',
            detail: data.status_msg,
            btnText: '重新申请',
            btnPath: ''
          };
          break;
        case '1':
          this.showNotice = false;
          break;

        default:
      }
    },

    // 申请门店
    applyStore() {
      let that = this;
      this.isFormEnd = false;
      that.$https('store.apply_gys', that.model, '提交中...').then(res => {
        this.isFormEnd = true;
        if (res.code === 1) {
          let options = {
            type:"default",
            icon:'checkmark-circle',
            back: false,
            title:'已提交审核'
          };
          this.$refs.submitAudit.show(options);
        }
      });
    },

    // 提交
    onSubmit() {
      let that = this;
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.applyStore();
        } else {
          this.$u.toast('请完善表单');
        }
      });
    },
    jump(path, parmas) {
      this.$Router.push({
        path: path,
        query: parmas
      });
    }
  }
};
</script>

<style lang="scss">
.apply-commission-wrap {
  background-color: #F8F8F8;

  .head-box {
    background-size: 100% auto;
    height: 594rpx;
  }
}
// 表单
.apply-form {
  width: 95%;
  margin: -36rpx 20rpx 0;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  .agreement {
    margin-top: 20rpx;
    .agreement-text {
      font-size: 24rpx;
      font-weight: 500;
      color: #4cb89d;
    }
  }
  .save-btn {
    width: 690rpx;
    line-height: 86rpx;
    background:  #D9D9D9 linear-gradient(90deg, #FC5351 0%, #FF6E6D 100%);
    border-radius: 43rpx;
    font-weight: 500;
    color: #ffffff;
    margin: 30rpx 0;
  }
}

// 星期
.week-modal {
  .week-modal--head {
    height: 100rpx;
    border-bottom: 1rpx solid $u-border-color;

    .text-cancel {
      color: #ccc;
    }
    .text-green {
      color: #18b566;
    }
  }
  .week-modal--content {
    .week-btn {
      margin-right: 56rpx;
      margin-bottom: 30rpx;
      &:nth-of-type(4n) {
        margin-right: 0;
      }
    }
  }
}

// 提示
.notice-modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 612rpx;
  min-height: 658rpx;
  background: #ffffff;
  padding: 30rpx;
  border-radius: 20rpx;
  .img-wrap {
    margin-bottom: 50rpx;
    .notice-img {
      width: 180rpx;
      height: 170rpx;
    }
  }
  .notice-title {
    font-size: 35rpx;
    font-weight: bold;
    color: #46351b;
    margin-bottom: 28rpx;
  }
  .notice-detail {
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 36rpx;
    margin-bottom: 50rpx;
  }
  .notice-btn {
    width: 492rpx;
    height: 70rpx;
    line-height: 70rpx;
    background: linear-gradient(90deg, #2dae9c, #6bc29e);
    box-shadow: 0 7rpx 11rpx 2rpx rgba(61, 179, 156, 0.34);
    border-radius: 35rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 10rpx;
  }
  .back-btn {
    width: 492rpx;
    height: 70rpx;
    line-height: 70rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #3ab29c;
    background: none;
  }
}
/deep/.u-border-top:after{
  border:none!important;
}
.slot-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .audit_img{
    width: 160rpx;
    height: 160rpx;
    .audit_img_top{
      width: 100%;
      height: 100%;
    }
  }
  .audit_title{
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    line-height: 48rpx;
    margin: 20rpx auto 20rpx;
  }
  .audit_sub_title{
    font-size: 32rpx;
    font-weight: 500;
    color: #999999;
    line-height: 48rpx;
    margin: 10rpx auto 10rpx;
  }
}
.disableds{
  background: #ececec linear-gradient(180deg,#f8f7f7 0%,#cdcdcd 100%)!important;

}
</style>
